<template>
    <!-- Cell 单元格的 to 属性和 VueRouter 中的 RouterLink 导航组件的 to 属性用法是一样的 -->
    <!-- :to="'/article/' + article.art_id" -->
    <!-- :to="`/article/${article.art_id}`" -->
    <van-cell 
        class="article-item"
        :to="{
            // 根据路由名称进行跳转
            name:'article',
            // 传递路由动态参数
            params:{
                // 属性名：路由路径中设计的动态参数名称
                articleId: article.art_id
            }
        }"
    >
        <!-- 标题 -->
        <div class="title van-multi-ellipsis--l2" slot="title">
            {{ article.title }}
        </div>

        <div class="label" slot="label">
            <!-- 三张封面 -->
            <div class="cover-warp" v-if="article.cover.type === 3">
                <div 
                    class="cover-item" 
                    v-for="(img,index) in article.cover.images" :key="index"
                >
                    <van-image          
                        class="cover-item-img" 
                        fit="cover"
                        :src="img"
                    />
                </div>
            </div>
            <!-- 作者和时间 -->
            <div class="label-info-wrap"> 
                <span>{{ article.aut_name }}</span>
                <span>{{ article.comm_count }}评论</span>
                <span>{{ article.pubdate | relativeTime }}</span>
            </div>
        </div>

        <!-- 一张封面 -->
        <van-image    
            v-if="article.cover.type === 1"
            slot="default"
            class="right-cover"
            fit="cover"
            :src="article.cover.images[0]"
        />
    </van-cell>
</template>

<script>
export default {
    name: 'ArticleItem',
    props: {
        article: {
            type: Object,
            required:true
        }
    }
}
</script>

<style scoped lang="less">
.article-item{
    .title{
        font-family: ArialMT;
        font-size: 32px;
        letter-spacing: 2px;
        color: #3a3a3a;
    }
    .van-cell__value {
        flex: unset;
        width: 233px;
        height: 146px;
        margin-left: 25px;
        .right-cover{
            width: 100%;
            height: 100%;
        }
    }

    .label{
        .label-info-wrap{          
            span{
                font-size: 23px;
                letter-spacing: 1px;
                color: #b4b4b4;
                margin-right: 25px;
            }
        }

        .cover-warp{
            display: flex;
            padding: 30px 0;
            .cover-item{
                flex:1;
                height: 146px;
                &:not(:last-child){
                    padding-right: 4px;
                }
                .cover-item-img{
                    width: 100%;
                    height: 146px;
                }
            }
        }

    }
}
</style>